import React, { Component } from 'react';
import "./GoodsList.scss"
import Data from "../../data/totalData.json"
import { Tabs } from 'antd-mobile';
import { List, AutoSizer } from "react-virtualized"
class GoodsList extends Component {
  constructor(props) {
    super(props)
    // console.log(props,11111111111)
    this.cid = props.match.params.cid
    // console.log(this.cid)
  }
  state = {
    newData: [],  //综合数据
    priceData: [],//价格数据
    tabs: [
      { title: "综合" },
      { title: "销量" },
      { title: "价格" },
    ]
  }
  componentDidMount () {
    // console.log(Data)
    // console.log(this.props)
    let cid = this.props.match.params.cid
    // console.log(cid)
    let listData = []
    let newArr = []
    Data.forEach(v => {
      if (v.cid == cid) {
        listData.push(v)
        newArr.push(v)
      }
    })
    console.log(listData)
    // this.setState({
    //     newData:listData
    // })
    for (let i = 0; i < newArr.length - 1; i++) {
      for (let j = 0; j < newArr.length - 1 - i; j++) {
        if (newArr[j].price - 0 > newArr[j + 1].price - 0) {
          var temp = newArr[j]
          newArr[j] = newArr[j + 1]
          newArr[j + 1] = temp
        }
      }
    }
    this.setState({
      newData: listData,
      priceData: newArr
    })
    // console.log(newArr)
  }
  // 跳转搜索中心
  handleSearch = (params) => {
    this.props.history.push("/searchCenter")
  }
  // 跳转详情页
  handleDetail = (e) => {
    let id = e.target.getAttribute("data-index")
    // console.log(id)
    this.props.history.push("/GoodsDetail/" + this.cid + "/" + id)
  }
  render () {
    return (
      <div className="GoodsList">
        {/* 头部搜索框开始 */}
        <div className="topNav">
          <div className="left" onClick={() => window.history.go(-1)}></div>
          <div className="right" onClick={this.handleSearch}>
            <em></em>
            <p>超级单品日 专区领卷立减100</p>
          </div>
        </div>
        {/* 头部搜索框结束 */}
        {/* 切换栏开始 */}
        <div className="tabs">
          <Tabs tabs={this.state.tabs}
            initialPage={0}
            animated={false}
            // onChange={(tab, index) => { console.log('onChange', index, tab); }}
            // onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            tabBarUnderlineStyle={{ border: "none" }}
            tabBarActiveTextColor={"red"}
          >
            {/* 商品列表开始 */}
            <div className="shopList">
              {
                this.state.newData.map((val) => {
                  return <div className="shopListItem" key={val.id} onClick={this.handleDetail} data-index={val.id}>
                    <div className="left" data-index={val.id}>
                      <img src={val.imgList} alt={val.name} data-index={val.id} />
                    </div>
                    <div className="right" data-index={val.id}>
                      <div className="title" data-index={val.id}>{val.name}</div>
                      <div className="price" data-index={val.id}>￥{val.price}</div>
                    </div>
                  </div>
                })
              }
            </div>
            {/* 商品列表开始 */}
            <div className="shopList">
              {
                this.state.newData.map((val) => {
                  return <div className="shopListItem" key={val.id} onClick={this.handleDetail} data-index={val.id}>
                    <div className="left" data-index={val.id}>
                      <img src={val.imgList} alt={val.name} data-index={val.id} />
                    </div>
                    <div className="right" data-index={val.id}>
                      <div className="title" data-index={val.id}>{val.name}</div>
                      <div className="price" data-index={val.id}>￥{val.price}</div>
                    </div>
                  </div>
                })
              }
            </div>
            <div className="shopList">
              {
                this.state.priceData.map((val) => {
                  return <div className="shopListItem" key={val.id} onClick={this.handleDetail} data-index={val.id}>
                    <div className="left" data-index={val.id}>
                      <img src={val.imgList} alt={val.name} data-index={val.id} />
                    </div>
                    <div className="right" data-index={val.id}>
                      <div className="title" data-index={val.id}>{val.name}</div>
                      <div className="price" data-index={val.id}>￥{val.price}</div>
                    </div>
                  </div>
                })
              }
            </div>
          </Tabs>
        </div>
        {/* 切换栏结束 */}
      </div>
    );
  }
}

export default GoodsList;